<template>
	<view class="review-container">
		<view class="section-title">游客评价（{{reviews.length}}）</view>

		<view v-if="reviews.length > 0">
			<view class="review-item" v-for="(review, index) in reviews" :key="index">
				<view class="review-header">
					<image class="avatar" :src="baseUrl + review.avatarUrl" mode="aspectFill"></image>
					<view class="user-info">
						<text class="username">{{review.username}}</text>
						<text class="review-time">{{formatDate(review.reviewCreatedAt)}}</text>
					</view>
					<view class="rating">
						<text v-for="i in 5" :key="i" :style="{color: i <= review.rating ? '#FFB400' : '#CCC'}">
							★
						</text>
					</view>
				</view>
				<text class="review-content">{{review.content}}</text>


				<!-- 添加删除按钮（仅显示给评论所有者） -->
				<view class="review-actions" v-if="isReviewOwner(review.userId)">
					<el-button type="danger" size="small" @click="handleDeleteReview(review.reviewId, index)">
						<el-icon><Delete /></el-icon>
						删除
						</el-button>
				</view>
			</view>
		</view>

		<view v-else class="no-reviews">
			<text>暂无评价，快来发表第一条评论吧~</text>
		</view>
	</view>
</template>
<script>
	import {
		ElButton,
		ElMessage,
		ElMessageBox,
		ElIcon
	} from 'element-plus';
	import {
		Delete
	} from '@element-plus/icons-vue';
	import {
		deleteParams
	} from '@/axios/http';
	export default {
		components: {
		    ElButton,  // ← 注意这里的逗号
			ElMessage,
			ElMessageBox,
			ElIcon,
		    Delete    // ← 最后一项不需要逗号
		  },
		props: {
			reviews: {
				type: Array,
				default: () => []
			},
			baseUrl: {
				type: String,
				default: ''
			},
			attractionId: {
				type: Number,
				required: true,
				validator: (value) => {
					// 确保是有效数字且大于0
					return !isNaN(value) && Number(value) > 0
				}
			}
		},
		beforeMount() {
			// console.log("子组件接收到的attractionId：", this.attractionId)
		},
		
		methods: {
			formatDate(timestamp) {
				const date = new Date(timestamp);
				return `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`;
			},
			// 检查是否是当前用户的评论
			isReviewOwner(reviewUserId) {
				// console.log("登录用户：",uni.getStorageSync('LoginUser').userId)
				return uni.getStorageSync('LoginUser').userId && reviewUserId === uni.getStorageSync('LoginUser').userId
			},

			// 删除评论
			async handleDeleteReview(reviewId, index) {
				try {
					await ElMessageBox.confirm('确定要删除这条评论吗？', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					
					let url = '/review';
					let data = {
						reviewId:reviewId,
						attractionId: this.attractionId
					}
					console.log("删除的数据", data);
					
					const res = await deleteParams(url,data);
					if (res.data.code === 200) {
						ElMessage.success('删除成功')
						this.$emit('review-deleted', index) // 通知父组件更新列表
					}
				} catch (error) {
					if (error !== 'cancel') {
						ElMessage.error('删除失败: ' + (error.message || error))
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.review-container {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;

		.section-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 20rpx;
			position: relative;
			padding-left: 20rpx;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 8rpx;
				height: 30rpx;
				background-color: #007AFF;
				border-radius: 4rpx;
			}
		}

		.review-item {
			padding: 20rpx 0;
			border-bottom: 1rpx solid #f0f0f0;

			&:last-child {
				border-bottom: none;
			}
		}

		.review-header {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			.avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.user-info {
				flex: 1;
				display: flex;
				flex-direction: column;

				.username {
					font-size: 28rpx;
					color: #333;
					margin-bottom: 5rpx;
				}

				.review-time {
					font-size: 24rpx;
					color: #999;
				}
			}

			.rating {
				text {
					font-size: 28rpx;
					margin-left: 5rpx;
				}
			}
		}

		.review-content {
			font-size: 28rpx;
			color: #333;
			line-height: 1.6;
			margin-bottom: 20rpx;
			display: block;
		}

		.no-reviews {
			text-align: center;
			padding: 40rpx 0;
			color: #999;
			font-size: 28rpx;
		}
	}
</style>